<template>
  <Layout>
    <div class="edit-profile-container">
      <a-card class="edit-profile-card">
        <h2 class="edit-profile-title">编辑个人资料</h2>
        <a-form
          :model="formState"
          name="editProfile"
          :rules="rules"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
          layout="vertical"
        >
          <a-form-item label="昵称" name="nickname">
            <a-input v-model:value="formState.nickname" placeholder="请输入昵称" />
          </a-form-item>

          <a-form-item label="性别" name="gender">
            <a-select v-model:value="formState.gender" placeholder="请选择性别">
              <a-select-option value="male">男</a-select-option>
              <a-select-option value="female">女</a-select-option>
              <a-select-option value="other">其他</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="个人简介" name="description">
            <a-textarea
              v-model:value="formState.description"
              :rows="4"
              placeholder="介绍一下你自己吧"
            />
          </a-form-item>



          <a-form-item label="手机号码" name="phone">
            <a-input v-model:value="formState.phone" placeholder="请输入手机号码" />
          </a-form-item>

          <a-form-item label="摄影器材" name="equipment">
            <a-select
              v-model:value="formState.equipment"
              mode="tags"
              placeholder="添加你的摄影器材"
              :options="equipmentOptions"
            />
          </a-form-item>

          <div class="form-actions">
            <a-button type="primary" html-type="submit">保存更改</a-button>
            <a-button @click="onCancel">取消</a-button>
          </div>
        </a-form>
      </a-card>
    </div>
  </Layout>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import Layout from '../components/Layout.vue';
import { useUserStore } from '../store/user';
import type { UserInfo } from '../api/user';

const router = useRouter();
const userStore = useUserStore();

const formState = reactive({
  nickname: '',
  gender: '',
  description: '',
  email: '',
  phone: '',
  equipment: [] as string[]
});

const rules = {
  nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  email: [
    { type: 'email', message: '请输入有效的电子邮箱地址' },
    { required: true, message: '请输入电子邮箱', trigger: 'blur' }
  ],
  phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }]
};

const equipmentOptions = [
  { value: '尼康Z9', label: '尼康Z9' },
  { value: '佳能R5', label: '佳能R5' },
  { value: '索尼A7M4', label: '索尼A7M4' },
  { value: '24-70mm f/2.8', label: '24-70mm f/2.8' },
  { value: '70-200mm f/2.8', label: '70-200mm f/2.8' }
];

const onFinish = async (values: any) => {
  try {
    // TODO: 调用更新用户信息的API
    await userStore.updateUserInfo(values);
    message.success('个人资料更新成功');
    router.push('/profile');
  } catch (error) {
    message.error('更新失败，请重试');
    console.error('更新用户信息失败:', error);
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
  message.error('请检查表单填写是否正确');
};

const onCancel = () => {
  router.push('/me');
};

onMounted(async () => {
  const userInfo = userStore.userInfo;
  if (userInfo) {
    formState.nickname = userInfo.nickname;
    formState.gender = userInfo.gender;
    formState.description = userInfo.description;
    formState.email = userInfo.email;
    formState.phone = userInfo.phone;
  }
});
</script>

<style scoped>
.edit-profile-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

.edit-profile-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.edit-profile-title {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

:deep(.ant-form-item) {
  margin-bottom: 24px;
}

:deep(.ant-btn-primary) {
  background: #95C7E0;
  border-color: #95C7E0;

  &:hover, &:focus {
    background: #6893AC;
    border-color: #6893AC;
  }
}
</style>